<!--
// 
// DebugInfo.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/06.
// 
-->
<template>
    <div class="DebugInfo">
        <el-descriptions :column="layoutType === 'mobile' ? 1 : 2" border>
            <template #title>
                <div class="title">
                    <div class="code">#{{ info.code }}</div>
                    <el-tag v-if="info.state === 1" round type="danger">未解决</el-tag>
                    <el-tag v-if="info.state === 2" effect="dark" round type="warning">待审核</el-tag>
                    <el-tag v-if="info.state === 3" effect="dark" round type="danger">已拒绝</el-tag>
                    <el-tag v-if="info.state === 4" effect="dark" round type="success">已完成</el-tag>
                    <el-tag v-if="info.state === 5" effect="dark" round type="info">已关闭</el-tag>
                    <div class="text">{{ info.name }}</div>
                </div>
            </template>
            <template #extra>
                <el-tooltip v-if="info.state === 1 && info.createdUserId === myInfo.id" content="修改" effect="light" placement="top">
                    <el-button link type="primary" @click="emits('edit', info)">
                        <el-icon size="20">
                            <Edit />
                        </el-icon>
                    </el-button>
                </el-tooltip>
                <el-tooltip v-if="info.state === 1 && info.createdUserId === myInfo.id" content="删除" effect="light" placement="top">
                    <el-button link style="margin-left: unset" type="danger" @click="beforeDelete">
                        <el-icon size="20">
                            <Delete />
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </template>
            <el-descriptions-item label="创建人">
                <el-button link type="primary">
                    <el-icon style="margin-right: 4px">
                        <User />
                    </el-icon>
                    {{ info.createdUserName }}
                </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="处理人">
                <el-button link type="primary">
                    <el-icon style="margin-right: 4px">
                        <User />
                    </el-icon>
                    {{ info.currentHandlerName }}
                </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="类型">
                <el-tag v-if="info.type === 1" effect="dark" type="primary">需求</el-tag>
                <el-tag v-if="info.type === 2" effect="dark" type="success">优化</el-tag>
                <el-tag v-if="info.type === 3" effect="dark" type="danger">缺陷</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="紧急程度">
                <el-tag v-if="info.level === 1" effect="dark" type="primary">低</el-tag>
                <el-tag v-if="info.level === 2" effect="dark" type="warning">中</el-tag>
                <el-tag v-if="info.level === 3" effect="dark" type="danger">高</el-tag>
                <el-tag v-if="info.level === 4" color="#7103b8" effect="dark" style="border-color: #7103b8">急</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开始处理时间">
                <g-date-time-preview :value="info.startTime" />
            </el-descriptions-item>
            <el-descriptions-item label="截止处理时间">
                <g-date-time-preview :value="info.endTime" icon-color="#c45656" />
            </el-descriptions-item>
            <el-descriptions-item label="产品">{{ info.productName }}</el-descriptions-item>
            <el-descriptions-item label="模块">{{ info.moduleName }}</el-descriptions-item>
        </el-descriptions>
        <el-divider border-style="dashed"></el-divider>
        <div class="sub-container">
            <div class="label">详细描述</div>
            <g-rich-text :value="info.remark" />
        </div>
        <div v-if="info.videoUrl" class="sub-container">
            <div class="label">视频</div>
            <div class="video-content">
                <video controls width="100%">
                    <source :src="$format.fullPath(info.videoUrl)" type="video/mp4" />
                    <a :href="$format.fullPath(info.videoUrl)">MP4</a>
                </video>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const {$format} = window

const props = defineProps({
    info: {
        type: Object,
        default: () => {
        }
    }
});
const emits = defineEmits(["edit", "delete"]);

// 路由
const router = useRouter();
// store
const store = useStore();
const myInfo = computed(() => store.getters.userInfo)
const layoutType = computed(() => store.getters.layoutType)

async function beforeDelete() {
    const ok = await $confirmSync("删除", "您确定要删除当前任务么?");
    if (!ok) return
    emits("delete", props.info);
}

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.DebugInfo {
    padding: 10px;

    .title {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .code {
            padding-right: 10px;
            color: var(--el-color-primary);
        }

        .text {
            padding-left: 10px;
            font-size: 18px;
        }
    }

    .sub-container {
        margin-top: 10px;

        .label {
            border-left: 4px solid var(--el-color-primary);
            padding-left: 10px;
        }

        .video-content {
            padding: 10px;
        }
    }
}
</style>